<!--评价信息-->
<template>
    <!-- <SlideView @close="handleClose">
        <h4>评价信息</h4>
        <div class="evaluate-info">
            <div class="info-row">
                <div class="info-item"><span class="info-label">数据摘要：</span> <span class="info-content">评价信息评价信息评价信息评价信息评价信息评价信息</span></div>
                <div class="info-item"><span class="info-label">发布日期：</span> <span class="info-content">2022-22-22</span></div>
            </div>
            <div class="info-row">
                <div class="info-item"><span class="info-label">更新日期：</span> <span class="info-content">2022-10-23</span></div>
                <div class="info-item"><span class="info-label">数据控制方：</span> <span class="info-content">北京万润利达钢铁有限公司</span></div>
            </div>
            <div class="info-row">
                <div class="info-item"><span class="info-label">数据格式：</span> <span class="info-content">数据库-Oracle</span></div>
                <div class="info-item"><span class="info-label">数据提供方：</span> <span class="info-content">北京万润利达钢铁有限公司</span></div>
            </div>
            <div class="info-row">
                <div class="info-item"><span class="info-label">更新频率：</span> <span class="info-content">实时</span></div>
                <div class="info-item"><span class="info-label">数据项：</span> <span class="info-content">100个</span></div>
            </div>
            <div class="info-row">
                <div class="info-item"><span class="info-label">描述：</span> <span class="info-content">该数据表包含热轧带肋钢筋的评价内容</span></div>
            </div>
        </div>
        <div class="data-info">
            <div>数据项</div>
            <div class="data-list">
                    <CustomTable
                    id="groupLeft"
                    class="list"
                    :search-callback="searchCallback"
                    :table-config="tableConfig"
                    :isShowPagination="false"
                    :isShowSelect="false"
                />
            </div>
        </div>
    </SlideView> -->
    <el-drawer v-model="props.isShow" :with-header="false" :close-on-click-modal="false">
        <div class="close-icon" @click="handleClose">
            <el-icon><Close /></el-icon>
        </div>
        <h4>评价信息</h4>
        <div class="evaluate-info">
            <div class="info-row">
                <!-- <div class="info-item"><span class="info-label">数据摘要：</span> <span class="info-content">评价信息评价信息评价信息</span></div>
                <div class="info-item"><span class="info-label">发布日期：</span> <span class="info-content">2022-22-22</span></div> -->
                <div class="info-item">
                    <div class="info-label">数据摘要：</div> 
                    <div class="info-content">评价信息</div>
                </div>
                <div class="info-item">
                    <div class="info-label">发布日期：</div>
                    <div class="info-content">2022-22-22</div>
                </div>
            </div>
            <div class="info-row">
                <div class="info-item">
                    <div class="info-label">更新日期：</div> 
                    <div class="info-content">2022-10-23</div>
                </div>
                <div class="info-item">
                    <div class="info-label">数据控制方：</div> 
                    <div class="info-content">北京万润利达钢铁有限公司</div>
                </div>
            </div>
            <div class="info-row">
                <div class="info-item">
                    <div class="info-label">数据格式：</div> 
                    <div class="info-content">数据库-Oracle</div>
                </div>
                <div class="info-item">
                    <div class="info-label">数据提供方：</div> 
                    <div class="info-content">北京万润利达钢铁有限公司</div>
                </div>
            </div>
            <div class="info-row">
                <div class="info-item">
                    <div class="info-label">更新频率：</div> 
                    <div class="info-content">实时</div>
                </div>
                <div class="info-item">
                    <div class="info-label">数据项：</div> 
                    <div class="info-content">100个</div>
                </div>
            </div>
            <div class="info-row">
                <div class="info-item-desc"><div class="info-label">描述：</div> <div>该数据表包含热轧带肋钢筋的评价内容该数据表包含热轧带肋钢筋的评价内容该数据表包含热轧带肋钢筋的评价内容</div></div>
            </div>
        </div>
      
        <div class="data-info">
            <div>数据项</div>
            <div class="data-list">
                    <CustomTable
                    id="groupLeft"
                    class="list"
                    :search-callback="searchCallback"
                    :table-config="tableConfig"
                    :isShowPagination="false"
                    :isShowSelect="false"
                />
            </div>
        </div>
        <div class="btn-style">
            <el-button @click="handleClose">关闭</el-button>
        </div>
    </el-drawer>

</template>
<script setup lang="ts">

	const { proxy } = getCurrentInstance() as any;
    const emits = defineEmits(['handleShowView','close']);
    const props = defineProps({
		'isShow': {
			'type': Boolean,
			'required': false,
			'default': `true`
		},
    })
    // const drawer = ref(true)

	const tableConfig = reactive({
		'tableHeader': [
            {
				'label': `英文名称`,
				'prop': `zhaiyao`
			},
			{
				'label': `中文名称`,
				'prop': `source`
			},
			{
				'label': `字段类型`,
				'prop': `kongfang`
			},
            {
				'label': `字段长度`,
				'prop': `desc`
			},
		]
	});
    const searchCallback = (params: any) => {
        	return {
			"success": true,
			"message": "string",
			"content": {
				"size": 0,
				"records": [
					{
						'id': 1,
                        'zhaiyao': "LINECODE",
                        'source': "生产线编号",
                        'kongfang': "字符型",
                        'desc': "20",
					},
                    {
						'id': 2,
                        'zhaiyao': "LINECODE",
                        'source': "生产线编号",
                        'kongfang': "字符型",
                        'desc': "20",
					},
                    {
						'id': 3,
                        'zhaiyao': "LINECODE",
                        'source': "生产线编号",
                        'kongfang': "字符型",
                        'desc': "20",
					},
                    {
						'id': 4,
                        'zhaiyao': "LINECODE",
                        'source': "生产线编号",
                        'kongfang': "字符型",
                        'desc': "20",
					}
				],
				"current": 0,
				"pages": 0,
				"total": 0
			},
			"options": {
				"additionalProp1": {},
				"additionalProp2": {},
				"additionalProp3": {}
			}
		}
    };
    const handleClose = () => {
        emits('handleShowView')
    }

	const created = async () => {
	};
	created();
</script>
<style scoped lang="scss">
	
    .evaluate-info{
        margin-top: 20px;
        position: relative;
       
        .info-row{
            display: flex;
            padding-bottom: 10px;
        }
        .info-item{
            margin-right: 10px;
            width: 50%;
            display: flex;
        }
        .info-item-desc{
            display: flex;
            width: 100%;
            .info-label{
                width: 20%;
            }
        }
        .info-content{
            width: 60%;
        }
        // .info-label{
        //     height: 20px;
        //     display: inline-block;
        // }
    }
    h4{
        font-size: 16px;
    }
     .close-icon{
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .btn-style{
        position: absolute;
        bottom: 20px;
        right: 20px;
        z-index: 100;
    }
    :deep .el-table{
        border: 1px solid #DEE2E6;
    }
    :deep .customTable .tableCon{
        padding: 10px 0px;
    }
    .data-info{
        margin: 20px 0 40px;
    }

</style>
